<template>
  <div class="main">
    <div class="searchBox clearfix">
    	<!-- <div class="title">{{title}}</div>    	 -->
    </div>   
    <div class="accountInfo">
		<p class="headerImg"><span><i class="el-icon-user-solid"></i></span></p>
		<p class="name"><span></span></p>
		<div class="accountNumber"><span>登陆账号</span><span>{{userInfo.phoneNumber}}</span></div>
		<div class="password"><span>登录密码</span><span>*******</span><a style="cursor:pointer" @click="passEdit">修改</a></div>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item prop="oldPassword">
				<el-input autocomplete="new-password" type="password"   v-model="ruleForm.oldPassword"   placeholder="请输入原是密码"  ></el-input>
				 <!-- <input type="password"  readonly onfocus="this.removeAttribute('readonly')" value="" autocomplete="off" style="border:1px solid #ccc"> -->				
			</el-form-item>
			<el-form-item  prop="newPassword">
				<el-input autocomplete="new-password" type="password"   v-model="ruleForm.newPassword"  placeholder="请输入新密码" ></el-input>
			</el-form-item>
			<el-form-item  prop="confirmPassword">
				<el-input autocomplete="new-password" type="password"  v-model="ruleForm.confirmPassword"    placeholder="请再次输入新密码" ></el-input>
			</el-form-item>
			<el-form-item style="text-align:right">
				<el-button @click="resetForm('ruleForm')">取消</el-button>
			<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>		   
			</el-form-item>
		</el-form>
	</div>	
  </div>
</template>

<script>
import { mapState } from 'vuex';


export default {
	name: 'accountInfo',	
	data () {
		  
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.confirmPassword !== '') {
            this.$refs.ruleForm.validateField('confirmPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePassold= (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原始密码'));
        }else {
          callback();
        }
      };
		return {
			passEditVisible:false,
			userInfo:null,								
			url:'/system/user/password/rest',
			param: {				
				regionCode:JSON.parse(localStorage.getItem('regionCode')),                          
                pageNum: 1,
                pageSize: 10,                    
                hotelName:null,                                  
                entryTimeStr:null,
                leaveTimeStr: null, 
                customName:null,
                customIdCard:null	            
			},	

	        ruleForm: {
				newPassword:'',
				confirmPassword:'',
				oldPassword:'',
				userId:  JSON.parse(localStorage.getItem('loginInfo')).rentingUserDTO.sysUserId,
	         
	        },
	        rules: {
	          newPassword: [
	            { validator: validatePass, trigger: 'blur' }
	          ],
	          confirmPassword: [
	            { validator: validatePass2, trigger: 'blur' }
	          ],
	          oldPassword:[
	            { validator: validatePassold, trigger: 'blur' }
	          ],
	         
	        }

			
		}
	},
	methods: { 
		passEdit(){
			this.passEditVisible=!this.passEditVisible;
		},
		submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.dispatch('postform',{param:this.ruleForm,url:this.url}).then(() => {
                if(this.addEdit.code==0){
                  this.$message({
                    message: this.addEdit.msg,
                    type: 'success'
                  });               
                  this.dialogVisible=false;  
                       
                  this.$router.push({  //密码修改成功  路由跳转
		              path: "/"
		           }); 
                }else{
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'warning'
                  }); 
                }              
              }).catch(() => {
                   this.$message({
                    message: this.addEdit.msg,
                    type: 'error'
                  }); 
                  
              })             
          } else {           
            return false;
          }
		});
		
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

		
	},
	created() {   
	
		this.userInfo=JSON.parse(localStorage.getItem('loginInfo')).rentingUserDTO;
		
       // this.$store.dispatch('getlist',{param:this.param,url:this.url});                
    },
    computed:{
    	...mapState(['list','addEdit'])
    }
}
</script>
<style lang="less" scoped>
.accountInfo{
	width: 380px;
	margin-left:160px;
	.el-button:nth-of-type(2){	
		background-color: #21D274;
	    border-color: #21D274;
	}
	.headerImg {
		text-align:center;
		span{
			display: block;
			width:120px;
			height:120px;
			border-radius:60px;			
			margin-left:130px;
		}
	}
	.name{
		font-size: 24px;
		color:#000;
		padding-top:24px;
		margin-bottom:60px;
	}
	.accountNumber{
		display: flex;
		margin-bottom:28px;
		span{
			flex:1 1 auto;
			text-align: left;
		}
		span:nth-of-type(2){
			text-align: right;
		}
	}
	.password{
		display: flex;
		margin-bottom:28px;
		span{
			flex:1 1 auto;
			text-align: left;
		}
		span:nth-of-type(2){
			text-align: right;
		}
	}
	.el-form-item {
		
		height:40px;
		margin-bottom:24px;
		.el-form-item__content{
			height:40px;
		}
		.el-input__inner{
			width:100%;
			height:40px;
			border:1px solid #ccc;
			border-radius:8px;
		}
		

		
	}
	
	
	
}


</style>
<style>	
.accountInfo .el-form-item__content{
	margin-left: 0px !important;
}
.accountInfo .el-icon-user-solid{
	font-size: 100px;
    color: #21D274;
    line-height: 120px;
}
.accountInfo .password a{
	color: #21D277;
	padding-left: 15px;	
}

</style>
